<!DOCTYPE html>
<html>
  <!--
  Copyright (c) 2014 The Chromium Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
  -->
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="origin-trial" content="AnnZaSfBggcmPxgNMYPXgW7tVBy3HoIkgSysHge4o7QT7U/n3Sr89HvKuJwNtPxgZ9Z/cs6TzbUy6F+glrMQngIAAABZeyJvcmlnaW4iOiJodHRwczovL2dvbmF0aXZlY2xpZW50LmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJQTmFDbCIsImV4cGlyeSI6MTU3NTQxNzU5OX0=">

    <title>Bullet Physics</title>

    <link rel="stylesheet" href="fullscreen.css">
    <script type="text/javascript" src="NaClAM.js"></script>
    <script type="text/javascript" src="NaClAMBullet.js"></script>
    <script type="text/javascript" src="//storage.googleapis.com/gonacl/pnacl-demo-bullet/three.min.js"></script>
    <script type="text/javascript" src="scene.js"></script>
    <script type="text/javascript" src="world.js"></script>
    <script type="text/javascript" src="scenes.js"></script>

    <script type="text/javascript">
      var expandoClosedMsg = 'Click for options';
      var expandoOpenMsg = '×';
      var expandoClosed = true;

      function toggleExpando() {
        var expandoEl = document.getElementById('title-box-expando');
        var toggleButton = document.getElementById('title-box-toggle-button');
        toggleButton.classList.toggle('open');
        expandoEl.classList.toggle('open');
        expandoClosed = !expandoClosed;
        if (expandoClosed)
          toggleButton.textContent = expandoClosedMsg;
        else
          toggleButton.textContent = expandoOpenMsg;
      }
    </script>
  </head>

  <body>
    <section>
      <div id="title-box">
        <h1>Bullet Physics in Portable Native Client</h1>
        <span id="title-box-toggle-button" onclick="toggleExpando()"></span>
        <script type="text/javascript">
          var toggleButton = document.getElementById('title-box-toggle-button');
          toggleButton.textContent = expandoClosedMsg;
        </script>
        <div id="title-box-expando">
          <p>
            <a href="http://bulletphysics.org/wordpress">Bullet Physics</a> is an
            open-source real-time phsyics simulation.
          </p>
          <p>
            <a href="https://developers.google.com/native-client/dev/">Native
              Client</a> is a sandbox for running compiled C and C++ code in the
            browser efficiently and securely.
          </p>
          <h2>Scenes</h2>
          <div>
            <div><button type="button" id="jenga10">Block Tower (10 blocks)</button></div>
            <div><button type="button" id="jenga20">Block Tower (20 blocks)</button></div>
            <div><button type="button" id="randomCube250">Random Cubes (250)</button></div>
            <div><button type="button" id="randomCube1000">Random Cubes (1000)</button></div>
            <div><button type="button" id="randomCube2000">Random Cubes (2000)</button></div>
            <div><button type="button" id="randomCylinder500">Random Cylinders (500)</button></div>
            <div><button type="button" id="randomShapes">Random Shapes</button></div>
            <div><button type="button" id="reload">Reload Scene</button></div>
          </div>
          <p class="small">
            Simulation Time: <span id="simulationTime">0</span>&mu;s
            <br>
            FPS: <span id="fps">0</span>
          </p>
        </div>
      </div>

      <div id="listener">
        <div id="rendererContainer"></div>
      </div>

      <div id="loading-cover">
        <div id="message">
          <div id="statusField"></div>
          <div id="progress" class="progress progress-striped active">
            <div id="progress-bar" class="progress-bar"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
            </div>
          </div>
        </div>
      </div>
    </section>

    <script type="text/javascript" src="main.js"></script>
  </body>
</html>
